<template>
    <div class="pasenges">
      <div class="header-section">
          <div class="identity-right"><span class="job">{{roleName}}</span></div>
          <div class="identity">
              <img class="head-img" :src="icon"/>
              <p class="name">{{username}}</p>
              <p class="phone" :class="[{'dark':!phoneno}]">{{!phoneno?'暂未绑定手机':phoneno}}</p>
          </div>
          <div class="bottom-line"></div>
      </div>
      <div class="function-section">
        <ul v-for="item in serviceArr" class="function-cell" @click="cellClickHandle(item,$event)">
          <li @touchstart="onCellDown" @touchcancel="onCellUp" @touchend="onCellUp">
            <div class="left">
              <span :class="'iconfont '+item.icon"></span>
              <span class="icon-name">{{item.names}}</span>
            </div>
            <div class="right">
              <span v-if="item.icon=='icon-tixian'" class="balance">&yen; {{balance.toFixed(2)}}</span>
              <span class="iconfont icon-toright"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>  
</template>
<script>
import meConfig from "./meConfig";
import wxpay from "../../common//js/wxpay";
import { mapState } from "vuex";
import Vue from "vue";
import wxqrcode from "../../common/js/wxqrcode";
import { Toast, Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
import "mint-ui/lib/toast/style.css";
Vue.component(Button.name, Button);
Vue.component(Toast.name, Toast);

export default {
  name: "v-me",
  data() {
    return {
      roleName: "",
      resultObj: {},
      serviceArr: null
    };
  },
  components: {},
  mounted() {
    this.wxReady();
    this.initFunction();
  },
  activated() {
  },
  methods: {
    initFunction() {
      let configItem = meConfig[this.role.toString()];
      this.roleName = configItem.roleName;
      this.serviceArr = configItem.service;
    },
    wxReady() {
      wxqrcode.getWxData(this);
    },
    onCellUp(e) {
      let cell = e.currentTarget;
      cell.style.backgroundColor = "transparent";
    },
    onCellDown(e) {
      let cell = e.currentTarget;
      cell.style.backgroundColor = "#f8f8f8";
    },
    QrCodeEnd(results) {
      //results
      // results = "fuc:bind,userid:20";
      // results = "fuc:integral,userid:136,id:5aa4e3e2ab7c1";
      var resultsArr = results.split(",");
      if (resultsArr.length < 2) {
        return;
      }
      resultsArr.forEach((val, index, arr) => {
        let tempArr = val.split(":");
        this.resultObj[tempArr[0]] = tempArr[1];
      });

      // alert('results='+results);

      if (!this.resultObj.fuc) return;
      if (this.resultObj.fuc == "good") {
        //礼品券扫码
        this.requestUseGood();
      }
    },
    requestUseGood() {
      this.$store.dispatch("toggleLoading", true);
      // alert('resultObj='+this.resultObj.id+'=ddd='+this.resultObj.userid+'bid='+this.userid);

      this.$http
        .post(this.path + `php/suncode/dealfuc.php`, {
          fuc: "usecoupon",
          cuid: this.resultObj.id,
          userid: this.resultObj.userid,
          bossuserid: this.userid,
          buyid: this.resultObj.buyId
        })
        .then(response => {
          let data = response.body;
          if (data.toString() == "200") {
            this.scanGoodSuccessHandle();
          } else if (data.toString() == "202") {
            Toast({
              message: "你不是商户",
              iconClass: "iconfont icon-tishi1",
              duration: 3000
            });
          } else if (data.toString() == "201") {
            Toast({
              message: "礼品券不存在",
              iconClass: "iconfont icon-tishi1",
              duration: 3000
            });
          } else if (data.toString() == "203") {
            Toast({
              message: "角色不存在",
              iconClass: "iconfont icon-tishi1",
              duration: 3000
            });
          } else if (data.toString() == "205") {
            Toast({
              message: "该客户已经和其他商户绑定了关系",
              iconClass: "iconfont icon-tishi1",
              duration: 3000
            });
          } else if (data.toString() == "206") {
            Toast({
              message: "不在使用时间范围内",
              iconClass: "iconfont icon-tishi1",
              duration: 3000
            });
          } else if (data.toString() == "303") {
            Toast({
              message: "代理商不存在",
              iconClass: "iconfont icon-tishi1",
              duration: 3000
            });
          }
          this.$store.dispatch("toggleLoading", false);
        })
        .catch(response => {
          //请求出错处理
          console.log(response);
        });
    },
    scanGoodSuccessHandle() {
      Toast({
        message: "操作成功",
        iconClass: "iconfont icon-msnui-success",
        duration: 3000
      });
      //   this.$router.go(-1);
      this.updatateUserInfo(this.initFunction);
    },
    cellClickHandle(cellData, event) {
      ////this.onScanQr(event);
      //this.QrCodeEnd("fuc:integral,userid:21,id:5aa3e888ab21c");
      //this.QrCodeEnd("");//
      if (cellData.names == "扫一扫") this.onScanQr(event);
      else if (cellData.names == "联系我们")
        window.location.href = "tel:" + this.serviceTel;
      else this.$router.push({ name: cellData.tourl });
    },
    onScanQr(event) {
      // this.QrCodeEnd("fuc:good,userid:1,id:2");
      wxqrcode.wxscanQRCode(this);
    }
  },
  computed: {
    ...mapState([
      "openid",
      "path",
      "userid",
      "role",
      "username",
      "icon",
      "phoneno",
      "serviceTel",
      "balance"
    ])
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../common/css/mixin.styl';

.pasenges {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 0.54rem;
  position: relative;

  .header-section {
    position: relative;
    width: 100%;
    background-color: #fe97b5;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px #ffcfde solid;

    .job {
      display: inline-block;
      color: #fe97b5;
      font-size: 0.12rem;
      background-color: #fff;
      width: 0.62rem;
      text-align: center;
      border-radius: 0.2rem;
      letter-spacing: 0.01rem;
      padding-top: 0.05rem;
      padding-bottom: 0.03rem;
      position: absolute;
      top: 0.16rem;
      right: 0.16rem;
    }

    .identity {
      text-align: center;
      margin-top: 0.2rem;

      .head-img {
        width: .9rem;
        height: .9rem;
        border-radius: 50%;
      }

      .name {
        margin-top: 0.1rem;
        font-size: 0.13rem;
        color: #fff;
        letter-spacing: 0.01rem;
      }

      .phone {
        margin-top: 0.07rem;
        font-size: 0.12rem;
        color: #fff;
        &.dark{
          color: #DB7093;
          //font-weight 700;
        }
      }
    }

    .bottom-line {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 1px;
      background-color: #d9a6b5;
    }
  }

  .function-section {
    padding: 0 0.1rem;
    box-sizing: border-box;
    margin-top: 0.06rem;

    ul {
      width: 100%;

      li {
        width: 100%;
        height: 0.36rem;
        color: #707070;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom-1px(#cacaca);

        .left {
          margin-left: 0.06rem;
          display: flex;
          align-items: center;

          .iconfont {
            font-size: 0.17rem;
            color #ec769a
          }

          .icon-name {
            font-size: 0.13rem;
            margin-left: 0.06rem;
          }
        }

        .right {
          margin-right: 0.05rem;
          .balance{
            margin-right 0.06rem;
            font-size 0.12rem;
            color #e61874;
          }
          .icon-toright {
            color: #acacac;
            font-size: 0.12rem;
          }
        }
      }
    }
  }
}
</style>
